<!DOCTYPE   html>
<html>
<head>
<meta charset="UTF-8">
<title>
</title>
<script type="text/javascript" src="../js/vue-2.6.10.js"></script>
<script type="text/javascript" src="../js/axios.js"></script>
<style type="text/css">
	  body {  
	      font-family: Arial, sans-serif;  
	      background-color: #f2f2f2;  
	  }  
	    
	  form {  
	      padding: 20px;   
	      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);  
	  }  
	    
	  h2 {  
	      text-align: center;  
	  }  
	    
	    
	  input[type="text"], input[type="password"] {  
	      width: 100%;  
	      padding: 8px;  
	      margin-bottom: 10px;  
	      border-radius: 3px;  
	      border: 1px solid #ccc;  
	  }  
	    
	  select {  
	      width: 101%;  
	      padding: 8px;  
	      border-radius: 3px;  
	      border: 1px solid #ccc;  
	  }  
	    
	  input[type="radio"] {  
	      margin-right: 5px;  
	  }  
	    
	  textarea {  
	      width: 100%;  
	      padding: 8px;  
	      border-radius: 3px;  
	      border: 1px solid #ccc;  
	      height: 50px;  
	  }  
	    
	  input[type="submit"] {  
	      width: 101%;  
	      padding: 10px;  
	      background-color: #484848;
	      color: white;  
	      border: none;  
	      border-radius: 3px;  
	      cursor: pointer;  
	  }
</style>
</head>
<body>
	<form action="/orderSystem/updateUser.do" method="Post" id="app">
       	<input type="hidden" v-model='user.id' name="id">
        <label   for="username">用户名：</label>
        <input    type="text" v-model="user.username"  id="username"   name="username"   required>
        <label   for="password">密码：</label>
        <input    type="password"  v-model="user.password" id="password"   name="password"   required>
        <label   for="age">年龄：</label>
        <select   id="age"   name="age" v-model="user.age"  required >
               <option   value="18">18岁</option>
               <option   value="19">19岁</option>
               <option   value="20">20岁</option>
               <option   value="21">21岁</option>
               <option   value="22">22岁</option>
               <option   value="23">23岁</option>
               <option   value="24">24岁</option>
               <option   value="25">25岁</option>
               <option   value="26">26岁</option>
               <option   value="26">27岁</option>
               <option   value="26">29岁</option>
               <option   value="26">30岁</option>
               <option   value="26">31岁</option>
               <option   value="26">32岁</option>
               <option   value="26">33岁</option>
               <option   value="26">34岁</option>
           </select>
           <label for="gender">性别：</label>
           <input v-if="user.gender=='男'" checked="checked" type="radio"   id="male"   name="gender"   value="男"   required>
           <input  v-else  type="radio"   id="male"   name="gender"   value="男"   required>
           <label for="male">男</label>
           <input v-if="user.gender=='女'" checked="checked"  type="radio"   id="female"   name="gender"   value="女"   required>
           <input  v-else  type="radio"   id="male"   name="gender"   value="女"   required>
           <label for="female">女</label>
           <label for="remark">备注：</label>
           <textarea id="remark" v-model="user.remake"  name="remark"   cols="30"   rows="10"></textarea>
           <input type="submit"   value="完成">
       </form>
       <script type="text/javascript">
	       function parseUrlParams() {
	    	    var url = window.location.href;
	    	    var paramString = url.split('?')[1];
	    	    var paramPairs = paramString.split('&');
	    	    var params = {};
	    	    paramPairs.reduce(function(params, pair) {
	    	        var parts = pair.split('=');
	    	        var key = parts[0];
	    	        var value = decodeURIComponent(parts[1] || '');
	    	        if (params[key]) {
	    	            params[key].push(value);
	    	        } else {
	    	            params[key] = [value];
	    	        }
	    	        return params;
	    	    }, params);
	    	    return params;
	    	}     		
	       let vue = new Vue({
				el: '#app',
				data:{
					user:{
						uname: '',
						pwd: '',
						age: '',
						gender: '',
						remake: '',
						id: ''
					}
				},
				created(){
					params = parseUrlParams();
					//url: 表示异步请求地址
					axios.get('/orderSystem/selectUserById.do?id='+params.id[0]).then(
						function(res_obj){
							//使用获取的数据来给vue对象中的users数据赋值
							vue.user = res_obj.data; 
						}
					).catch(
						function(error_obj){
							alert("网络加载异常！！！");
						}
					)
				}
			});
	</script>
</body>
</html>